<template>
  <div>
      <el-main>
          <!-- 搜索框区 -->
      <div>
        <el-input
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入id"
          v-model="selectByKey.id"
          suffix-icon="Search"
          clearable
        >
        </el-input>
        <!-- <el-input disabled
          style="width: 180px; height: 32px; margin-right: 5px"
          :placeholder="'商家id：'+mUser.id"
          suffix-icon="Search"
          clearable
        >
        </el-input> -->
        <el-input
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入标题"
          suffix-icon="Message"
          v-model="selectByKey.title"
          clearable
        >
        </el-input>
        <el-button type="primary"
          style="height: 32px; width: 60px; font-size: 13px" @click="load">搜索</el-button>
          <el-button type="warning"
          style="height: 32px; width: 60px; font-size: 13px" @click="reset">重置</el-button>
      </div>

      <!-- 新增按钮区域 -->
      <div style="margin: 10px 0px">
        <el-button @click="handleAdd" type="primary">
          新增<el-icon class="el-icon--right"><CirclePlus /></el-icon>
        </el-button>

        <!-- <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                title="您确定要删除吗?"
                @confirm="delBatch"
              >
                <template #reference>
                 <el-button disabled type="danger">
                  批量删除<el-icon class="el-icon--right"><Remove /></el-icon>
                </el-button>
                </template>
              </el-popconfirm>

        <el-upload
            class="upload-demo"
            :action="'http://'+serverIp+':9090/user/import'"
            style="display: inline-block;margin: 0px 12px;"
            :show-file-list="false"
            accept="xlsx"
            :on-success="handleImportSuccess"
            :on-error="handleImportError"
            >
             <el-button disabled type="primary">
                导入<el-icon class="el-icon--right"><Upload /></el-icon>
             </el-button>
        </el-upload>
       


        <el-button disabled type="primary" @click="handleExport">
          导出<el-icon class="el-icon--right"><Download /></el-icon>
        </el-button> -->
      </div>

      <div>
        <el-scrollbar>
          <el-table
            height="450"
            :data="tableData"
            border
            stripe
            size="default"
            :header-cell-class-name="headerBg"
            @selection-change="handleSelectionChange"
          >
           <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="id" width="70" />
            <el-table-column prop="title" label="公告标题" width="250" />
            <!-- <el-table-column prop="role" label="角色" width="250">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.role === 'ROLE_ADMIN'">管理员</el-tag>
                <el-tag type="warning" v-if="scope.row.role === 'ROLE_TEACHER'">老师</el-tag>
                <el-tag type="success" v-if="scope.row.role === 'ROLE_STUDENT'">学生</el-tag>
              </template>
            </el-table-column> -->
            <el-table-column prop="submitTime" label="发布时间" width="180" />
            <el-table-column prop="content" label="内容" width="250" />
            <el-table-column prop="img" label="轮播图路径" width="200" />
            <!-- <el-table-column prop="hobby" label="爱好" width="250" /> -->
            <!-- <el-table-column prop="操作" label="edit" >
              <el-button type="success">编辑 </el-button>
              <el-button type="danger">删除</el-button>
            </el-table-column> -->
            <el-table-column prop="edit" label="操作">
              <template #default="scope">
                <el-button
                type="success"
                  @click="handleEdit(scope.$index, scope.row)">编辑<el-icon style="margin-left:3px"><EditPen /></el-icon>
                  </el-button>
                <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                title="您确定要删除吗?"
                @confirm="handleDelete(scope.$index, scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger">删除<el-icon style="margin-left:3px"><Delete /></el-icon>
                  </el-button>
                </template>
              </el-popconfirm>
                
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div style="margin: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2,5,10,15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-scrollbar>

        <!-- 对话框 -->
         <el-dialog @close="handleClose"  title="公告栏信息" v-model="dialogFormVisible" width="30%" >
          <el-form label-width="80px" size="small">
            <el-form-item label="id">
              <el-input disabled v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="角色">
              <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
                <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item label="公告标题">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="发布时间">
              <el-input disabled v-model="form.submitTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容">
              <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="轮播图路径">
              <el-input v-model="form.img" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click=" this.dialogFormVisible = false,this.form = {}">取消</el-button>
                <el-button type="primary" @click="save">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>


       </div>
    </el-main>
      
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {serverIp} from '../../public/config.js'

export default {
    name:'notice',
    data(){
        return{
          serverIp:serverIp,
            tableData:[],
            //user
            pageNum:1,
            pageSize:10,
            total:0,
            selectByKey:{
                id:"",
                title:"",
            },
            
            //
            form:{
            },
            roles:[],
            dialogFormVisible: false,
            // 多选框选中对象
            multipleSelection:[],
        }
    },
    created(){
    //
    this.load()
    },
    methods:{
        //导出成功
        handleExport(){
            window.open(`http://${serverIp}:9090/user/export`)
        },
        //导入失败
        handleImportError(){
             this.$message.error("导入失败!")
        },
        //导入成功
        handleImportSuccess(){
            this.$message.success("导入成功!")
            this.load()
        },
         //多选删除
        delBatch(){
        let ids = this.multipleSelection.map(v => v.id)  //[{},{},{}] => [1,2,3]
        this.request.post("/user/del/batch",ids).then(res => {
            if (res.code === '200') {
            this.$message.success("删除成功")
            this.load()
            } else {
            this.$message.error("删除失败")
            }
        })
        },
        //多选选中的对象
        handleSelectionChange(val){
        this.multipleSelection = val
        },
        //对话框关闭
        handleClose(){

        this.dialogFormVisible = false,
        this.form = {}
        },
    
        //删除行
        handleDelete(index,id){
        this.request.delete("/notice/delete/"+ id).then(res => {
            if (res.code === 200) {
            this.$message.success("删除成功")
            this.load()
            } else {
            this.$message.error("删除失败")
            }
        })
        },
        //编辑
        handleEdit(index, row){
        //console.log(index, row);
        this.dialogFormVisible = true,
        this.form = row
        },
        //保存表单
        save() {
          //判断新增 还是修改
          if(this.form.id){
            //修改
            //console.log("修改");
            // console.log(this.form);

            this.request.put("/notice/update", this.form).then(res => {
                      // console.log('update',res);
                        if (res.code === 200) {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.form = {}
                        this.load()
                        } else {
                        this.$message.error("保存失败")
                        this.load()
                        }
                    })

          }else{
            //新增
            //console.log("新增");
            // console.log(this.form);
            //准备JSON
            let A = {
              // 默认商家id为1
              merchantId:this.mUser.id,
              title:this.form.title,
              content:this.form.title,
              img:this.form.img
            }
            this.request.post("/notice/add",JSON.stringify(A)).then(res => {
                                  // console.log('add',res);
                                    if (res.code === 200) {
                                    this.$message.success("保存成功")
                                    this.dialogFormVisible = false
                                    this.form = {}
                                    this.load()
                                    } else {
                                    this.$message.error("保存失败")
                                    this.load()
                                    }
                                })

          }


        
        },

        //新增按钮
        handleAdd(){
        this.dialogFormVisible = true;
        },
        // 表头背景
        headerBg({ row, rowIndex }) {
        if (rowIndex == 0) {
            return "headerBgClass";
        }
        },

        // 重置按钮
        reset(){
        this.selectByKey={
                id:"",
                title:"",
            },
        this.load()
        },

        //发送请求
        load() {
            this.selectByKey.merchantId = this.mUser.id
            this.request.post("/notice/getAll/"+this.pageNum+"/"+this.pageSize,JSON.stringify(this.selectByKey)).then(res => {
              //console.log(res);
                if(res.code === 200)
                this.tableData = res.data.records
                this.total = res.data.total
                // 处理时间格式
                // if (this.tableData) {
                //   this.tableData.forEach(t => {
                //     // t.submitTime = t.submitTime.replace("T"," ")
                //     // 2023-01-09 14:43:58
                //    t.submitTime = t.submitTime.replace("T"," ").substring(0,t.submitTime.indexOf("."))
                //   return  t.submitTime
                //   })
                // }
            })
          //   this.request.get("/role").then(res => {
          //   this.roles = res.data
          // })
          // 查询商家id
          
        },

        // 分页器
        handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.load();

        },
        handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.load();
        },
    },
    computed:{
      ...mapState("personAbout",["mUser"])
    }

}
</script>

<style>
.headerBgClass {
  background-color: rgb(221, 213, 213) !important;
}
</style>